<template>
  <div class="page">
    <h2 @click="login">我的</h2>
    <div class="userInfo" v-if="user">
      <img :src="user.headicon" alt="用户头像" />
      <p>
        用户id：{{user.id}} <br>
        用户昵称：{{user.nickname}}
        <a href="#" @click="logout">退出</a>
      </p>
    </div>
    <div class="userInfo" v-else="!user">
      <a href="#" @click="login">请登录</a>
    </div>
    <div class="menu">
      <router-link :to="'/order'">我的订单</router-link>
      <router-link :to="'/history'">访问历史 <b>({{this.$store.state.historyPro.length}})</b></router-link>
    </div>
  </div>
</template>

<script>
  import Api from '../api/index'

  export default {
    data() {
      return {
        user: null
      }
    },
    methods: {
      isLogin() {
        Api.isLogin({
          success: (d) => {
            this.user = d.data;
          }
        })
      },
      logout(e) {
        e.preventDefault();
        Api.logout({
          success: (d) => {
            this.user = null;
          }
        })
      },
      login(e){
        e.preventDefault();
        Api.login({
          data:{
            u_name:"jacky",
            u_pwd:"111111",
          },
          success: (d) => {
            this.user = d.data;
          }
        })
      }
    },
    mounted() {
      this.isLogin();
    }
  }
</script>

<style lang="less" rel="stylesheet/less">
 .userInfo{
   text-align: left; font-size: 12px;clear: both;
   img{display: block;float: left;width: 50px;height: 50px; border: 1px solid #ccc; margin:0 10px 0 0; box-sizing: content-box;}
 }
  .menu{clear: both; padding: 10px ;
    a{display: inline-block;background: #999; padding:5px 10px; margin: 0 5px; width: 100px; box-sizing: padding-box; color: #fff; text-decoration: none;font-size: 10px;}
    b{color: #070; font-size: 10px;}
  }
</style>
